<#assign base=request.contextPath/>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>打赏</title>
    <script src="../wx/js/mui.min.js"></script>
    <link href="../wx/css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="../wx/css/main.css"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
   
    
    <style type="text/css">
	.content{width:80%;margin:200px auto;}
	.hide_box{z-index:999;filter:alpha(opacity=50);background:#666;opacity: 0.5;-moz-opacity: 0.5;left:0;top:0;height:99%;width:100%;position:fixed;display:none;}
	.shang_box{width:540px;height:540px;padding:10px;background-color:#fff;border-radius:10px;position:fixed;z-index:1000;left:50%;top:50%;margin-left:-280px;margin-top:-280px;border:1px dotted #dedede;display:none;}
	.shang_box img{border:none;border-width:0;}
	.dashang{display:block;width:100px;margin:5px auto;height:25px;line-height:25px;padding:10px;background-color:#E74851;color:#fff;text-align:center;text-decoration:none;border-radius:10px;font-weight:bold;font-size:16px;transition: all 0.3s;}
	.dashang:hover{opacity:0.8;padding:15px;font-size:18px;}
	.shang_close{float:right;display:inline-block;}
	.shang_logo{display:block;text-align:center;margin:20px auto;}
	.shang_tit{width: 100%;height: 75px;text-align: center;line-height: 66px;color: #a3a3a3;font-size: 16px;background: url('../wx/img/cy-reward-title-bg.jpg');font-family: 'Microsoft YaHei';margin-top: 7px;margin-right:2px;}
	.shang_tit p{color:#a3a3a3;text-align:center;font-size:16px;}
	.shang_payimg{width:140px;padding:10px;margin:0 auto;border-radius:3px;height:140px;}
	.shang_payimg img{display:block;text-align:center;width:140px;height:140px;border-radius:75px; }
	.pay_explain{text-align:center;margin:10px auto;font-size:12px;color:#545454;}
	.pay_explain .personName{font-size:14px;color:#545454;font-weight: bold;}
	.pay_explain .orgName{margin-left: 20px;}
	.radiobox{width: 16px;height: 16px;background: url('../wx/img/radio2.jpg');display: block;float: left;margin-top: 5px;margin-right: 14px;}
	.checked .radiobox{background:url('../wx/img/radio1.jpg');}
	.shang_payselect{text-align:center;margin:0 auto;margin-top:40px;cursor:pointer;height:60px;width:280px;}
	.shang_payselect .pay_item{display:inline-block;margin-right:10px;float:left;}
	.shang_info{clear:both;}
	.shang_info p,.shang_info a{color:#C3C3C3;text-align:center;font-size:12px;text-decoration:none;line-height:2em;}

.selfMoneyCss{display:inline-block;margin-right:10px;float:left;    position: relative;
    top: -30px;
    left: 200px;}

.mui-input-row label {width: 20%;}
.mui-input-row-self label {    font-family: 'Helvetica Neue',Helvetica,sans-serif;
    line-height: 1.1;
    float: left;
    width: 20%;
    padding: 11px 15px;}
/* 星星点灯照亮我的家门 */
.star_bg {
    width: 120px; height: 20px;
        margin-top: 11px;
    background: url(../wx/img/star.png) repeat-x;
    position: relative;
    overflow: hidden;
}
.star {
    height: 100%; width: 24px;
    line-height: 6em;
    position: absolute;
    z-index: 3;
}
.star:hover {    
    background: url(../wx/img/star.png) repeat-x 0 -20px!important;
    left: 0; z-index: 2;
}
.star_1 { left: 0; }
.star_2 { left: 24px; }
.star_3 { left: 48px; }
.star_4 { left: 72px; }
.star_5 { left: 96px; }
.star_1:hover { width: 24px; }
.star_2:hover { width: 48px; }
.star_3:hover { width: 72px; }
.star_4:hover { width: 96px; }
.star_5:hover { width: 120px; }

label { 
    display: block; _display:inline;
    height: 100%; width: 100%;
    cursor: pointer;
}

/* 幕后的英雄，单选按钮 */
.score { position: absolute; clip: rect(0 0 0 0); }
.score:checked + .star {    
    background: url(../wx/img/star.png) repeat-x 0 -20px;
    left: 0; z-index: 1;
}
.score_1:checked ~ .star_1 { width: 24px; }
.score_2:checked ~ .star_2 { width: 48px; }
.score_3:checked ~ .star_3 { width: 72px; }
.score_4:checked ~ .star_4 { width: 96px; }
.score_5:checked ~ .star_5 { width: 120px; }

.star_bg:hover .star {  background-image: none; }

/* for IE6-IE8 JS 交互 */
.star_checked {    
    background: url(../wx/img/star.png) repeat-x 0 -20px;
    left: 0; z-index: 1;
}

textarea.noscrollbars {
  overflow: hidden;
  width: 77%;
  height: 60px;
  margin:1px;
  border:1px
}
</style>

<script src="../wx/js/jquery/1.9.1/jquery.min.js"></script> 
</head>
<body>
	<!-- <header class="mui-bar mui-bar-nav">
			<a class="mui-icon mui-icon-bars mui-pull-left mui-plus-visible"></a>
			<a id="info" class="mui-icon mui-icon-info-filled mui-pull-right" style="color: #999;"></a>
			<h1 class="mui-title">打赏</h1>
	</header> -->
	<!--人员及公司信息-->
	<div class="mui-content">
	    
	<div class="mui-table-view">
		<div class="shang_payimg">
			<img  src="../wx/img/wm.jpg">
		</div>
		
		<div class="pay_explain"><span class="personName">${employeeInfoDTO.name}</span><span class="orgName">${(bizInfoDTO.bizName)!''}</span></div>
		<div class="pay_explain">您的打赏是对我最大的鼓励</div>
	</div>
	
	<form name="rewardForm" id="rewardForm" action="/ylkj/reward/saveReward.do">
	<input type="hidden" id="phrCode" name="phrCode" value="${employeeInfoDTO.phrCode}">
	<input type="hidden" id="bizCode" name="bizCode" value="${(employeeInfoDTO.bizCode)!''}">
	<!--打赏信息-->
	<h5 class="mui-content-padded">评价信息</h5>
	<div>
	
		<div class="mui-card">
		
		
		
		<div class="mui-input-group">
		<div class="mui-input-row">
									<label>服务评价</label>
									<div id="starBg" class="star_bg">                    	
    <input type="radio" id="starScore1" class="score score_1" value="1" name="score">
    <a href="#starScore1" class="star star_1" title="差"><label for="starScore1"></label></a>
    <input type="radio" id="starScore2" class="score score_2" value="2" name="score">
    <a href="#starScore2" class="star star_2" title="较差"><label for="starScore2"></label></a>
    <input type="radio" id="starScore3" class="score score_3" value="3" name="score">
    <a href="#starScore3" class="star star_3" title="普通"><label for="starScore3"></label></a>
    <input type="radio" id="starScore4" class="score score_4" value="4" name="score">
    <a href="#starScore4" class="star star_4" title="较好"><label for="starScore4"></label></a>
    <input type="radio" id="starScore5" class="score score_5" value="5" name="score">
    <a href="#5" class="star star_5" title="好"><label for="starScore5"></label></a>
</div>
								</div>
								<div class="mui-input-row-self">
									<label>您的心声</label>
									<div><textarea class="noscrollbars" onkeyup="autoGrow(this);" name="evaluteDetail" id="evaluteDetail"
									placeholder="随便说点什么吧……"></textarea></div>
								</div>
		   

</div>
		</div>
	</div>
	
	<!--打赏信息-->
	<h5 class="mui-content-padded">打赏信息</h5>
	<div>
		<div class="mui-card">
				<div class="mui-input-group">
					<div class="mui-input-row mui-radio mui-left">
						<label>0元</label>
						<input name="money" type="radio" value="0">
					</div>
					<div class="mui-input-row mui-radio mui-left">
						<label>2元</label>
						<input name="money" type="radio" checked value="2">
					</div>
					<div class="mui-input-row mui-radio mui-left">
						<label>5元</label>
						<input name="money" type="radio" value="5">
					</div>
					<div class="mui-input-row mui-radio mui-left">
						<label>10元</label>
						<input name="money" type="radio" value="10">
					</div>
					<div class="mui-input-row mui-radio mui-left">
					    
						<label>你说多少就多少，单位：元<div id = "selfMoney" class="selfMoneyCss" style="display:none">
						<input type="text" name="selfMoney" id="selfMoney" placeholder="此处输入您要打赏的金额" >
						</div>
						</label>
						<input name="money" type="radio" value="-1" id="selfChoose">
						
					</div>
					
				</div>
			</div>
	</div>
	</form>
	<!--打赏信息-->
	<!--<h5 class="mui-content-padded">打赏方式</h5>
	<div class="mui-table-view">
		<div class="shang_payselect" style="padding-top:15px;margin-top: 10px;">
			<div class="pay_item checked" data-id="alipay">
				<span class="radiobox"></span>
				<span class="pay_logo"><img src="img/alipay.jpg" alt="支付宝" /></span>
			</div>
			<div class="pay_item" data-id="weipay">
				<span class="radiobox"></span>
				<span class="pay_logo"><img src="img/wechat.jpg" alt="微信" /></span>
			</div>
		</div>
	
	</div>
	      -->
	      
	      
	      <div class="mui-content">
		    <div class="mui-content-padded">
		        <button type="button" class="mui-btn mui-btn-danger mui-btn-block" onclick="saveReward()">提交打赏</button>
		       </div>
		      </div>
	
	</div>
	
	<script type="text/javascript">
$(function(){
	$(".pay_item").click(function(){
		$(this).addClass('checked').siblings('.pay_item').removeClass('checked');
		var dataid=$(this).attr('data-id');
		//$(".shang_payimg img").attr("src","img/"+dataid+"img.jpg");\
	});
	
	//得到url中的参数
	/* var userId = GetQueryString('employeeId');
	alert("用户id"+userId); */
	
	
	 $('input:radio[name="money"]').click(function(){
		   var moneyChoose = $(this).val();
		   if(moneyChoose == -1){
			   $("#selfMoney").show();
		   }else{
			   $("#selfMoney").hide();
			   $("#selfMoney").val('');
		   }
		   
		  });
	
});
function dashangToggle(){
	$(".hide_box").fadeToggle();
	$(".shang_box").fadeToggle();
}

function GetQueryString(name)
{
     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
     var r = window.location.search.substr(1).match(reg);
     if(r!=null)return  unescape(r[2]); return null;
}

//大文本部分
function autoGrow (oField) {
	  if (oField.scrollHeight > oField.clientHeight) {
	    oField.style.height = oField.scrollHeight + "px";
	  }
	}
	
	
	function saveReward(){
		  document.getElementById("rewardForm").submit();
	}


</script>
</body>
</html>